<template>
    <div >

        <page-container
        :header-ceiling="pageConfig.header.ceiling"
        :header-ceiling-color="pageConfig.header.ceilingColor"
        :header-regular="pageConfig.header.regular"
        :header-color="pageConfig.header.background"
        :footer-regular="pageConfig.footer.regular"
        :footer-color="pageConfig.footer.background"
        >
            <template slot="content">
                <div style="width: 100%;display: flex;justify-content: center;">
                    <div class="match-details-main">
                        <section-title :title="match.title"></section-title>
                        <div class="details-info-item">发布者：{{ match.publisherName }}</div>
                        <div class="content-main">
                            <div class="content-view" v-html="match.content"></div>
                            <div class="details-info-item">竞赛时间：{{ match.startTime }} - {{ match.endTime }}</div>
                        </div>
                        
                        <div class="match-option">
                            <i-button level="info" @click.native="enrollMatch">立即报名</i-button>
                        </div>

                    </div>
                </div>
            </template>
        </page-container>


    </div>
</template>
<script>

import PageContainer from '@/components/container/page-container/PageContainer.vue';
import SectionTitle from '@/components/plugs/section-title/SectionTitle.vue';
import {get, post} from '@/utils/api.js'
import '@/assets/css/content.css'
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
import IButton from '@/components/plugs/i-button/IButton.vue';

export default{

    data(){

        return{
            pageConfig:{
                header:{
                    regular:false,
                    ceiling:true,
                    background:'#1E171F',
                    ceilingColor:'#1E171F'
                },
                footer:{
                    regular:true,
                    background:'#1E171F'
                }
            },
            match:{}

        }
    },
    methods:{

        getMatchDetails(){
            const id = this.$route.params.id;

            const promise = get({
                url:'/base-match/front/match/details',
                params:{id}
            },false);

            promise.then(res=>{
                if(res&&res.code === 200){
                    this.match = res.data;
                    this.$nextTick(()=>{
                        Prism.highlightAll();
                    })
                }
            })


        },
        enrollMatch(){
            const promise = post({
                url:'/base-match/front/match/enroll',
                data:{id:this.match.id}
            });

            promise.then(res=>{
                if(res){
                    if(res.code === 200){
                        this.$message.success(res.message);
                        return;
                    }
                    this.$message.error(res.message);
                }
            })
        }

    },
    created(){
        this.getMatchDetails();

    },
    components:{
        PageContainer,
        IButton,
        SectionTitle
    }
}

</script>

<style scoped>
.match-details-main{
    width: 1000px;
    min-height: 100vh;
}
.content-main{
    border-bottom: 1px solid #dcdfe6;
}
.match-option{
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 40px;
    height: 100px;
}
.details-info-item{
    color: #999;
    /* font-size: 14px; */
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>